﻿@model WebExtras.JQDataTables.Datatable

<p>
  Status column is a column which contains the CSS classes to be applied to the associated row. This feature is
  very handy to notify the user of any status per row in the table. By default the four classes: error, warning, info and
  success are supported which are analogous to the jQuery UI and Twitter Bootstrap frameworks. However, since it is all
  in the CSS, you are free to modify and use any classes of you choosing.
</p>

<div class="well ui-well">
  <h4>Modified Datatable constructor setup</h4>
  We enable the <strong>enableStatusColumn</strong> flag on the Datatable constructor
  <pre><code>   
  Datatable dTable = new Datatable("status-table", dtSettings, dtRecords, enableStatusColumn: true);
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Making the data to be displayed</h4>
  Now when making the data to be displayed you can add an extra column containing any CSS classes that you would
  like to be used to add styling to the table rows.
  <pre><code>   
  string[][] dtData = new string[][]
  {
    new string[] { "first column row 1", "second column row 1", "error" },    
    new string[] { "first column row 2", "second column row 2", "warning" },
    new string[] { "first column row 3", "second column row 3", "info" },
    new string[] { "first column row 4", "second column row 4", "success" }
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Modified Datatable constructor setup</h4>
  We enable the <strong>enableStatusColumn</strong> flag on the Datatable constructor
  <pre><code>   
  Datatable dTable = new Datatable("status-table", dtSettings, dtRecords, enableStatusColumn: true);
  </code></pre>
</div>

<div class="well ui-well">
  <h4>And our status column enabled output is</h4>
  <div class="output">
    @Html.Partial(MVC.Shared.Views._Datatable, Model)
  </div>
</div>
